*
    margin 0
    padding 0
    box-sizing border-box

html
body
    overflow hidden

.experience
    position fixed
    width 100vw
    height 100vh

html.debug-hidden
    .tp-dfwv
    .credits
        display none

.credits
    position absolute
    bottom 20px
    right 20px
    color #ffffff
    text-align right
    font-family 'Roboto', sans-serif
    font-weight 300

    a
        color inherit

.intro
    display flex
    // display none
    flex-direction column
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background #111111
    color #eeeeee
    justify-content center
    align-items center
    z-index 1
    pointer-events none

    .title
        padding-top 1em
        margin-bottom 1em
        font-family 'Cormorant Infant', serif
        font-size 3.5vw
        font-weight 300
        text-transform uppercase
        letter-spacing 0.02em
        -webkit-font-smoothing antialiased
        opacity 0
        transition-property opacity

    .sub-title
        margin-bottom 1em
        font-size 0.8vw
        font-family 'Roboto', sans-serif
        font-weight 300
        letter-spacing 0.2em
        -webkit-font-smoothing antialiased
        opacity 0
        transition-property opacity

    &.is-visible
        .title
            opacity 1
            transition-delay 0s
            transition-duration 2s
                
        .sub-title-1
            opacity 1
            transition-delay 3s
            transition-duration 2s
                
        .sub-title-2
            opacity 1
            transition-delay 5s
            transition-duration 2s

    &.is-hidden
        opacity 0
        transition-property opacity
        transition-delay 3s
        transition-duration 3s
        transition-timing-function ease-out

        .title
            opacity 0
            transition-delay 1s
            transition-duration 2s
            
        .sub-title
            opacity 0
            transition-delay 0s
            transition-duration 2s

    
.desktop-only
    display flex
    display none
    flex-direction column
    position absolute
    top 0
    left 0
    width 100%
    height 100%
    background #111111
    color #eeeeee
    justify-content center
    align-items center
    z-index 1
    pointer-events none

    @media (max-width 700px)
        display flex

    @media (max-height 700px)
        display flex

    .title
        font-family 'Cormorant Infant', serif
        font-size 6vw
        font-weight 300
        text-transform uppercase
        letter-spacing 0.02em
        -webkit-font-smoothing antialiased